import { h } from '@knno/dom/jsx';
import { Cell, CellProps } from '../../doc/cell';
import { Tag, UITag } from '@knno/ui/jsx/tag';
import { cellTagStyle } from '../../doc/cell.css';

export function tag(cell: Cell, attrs: CellProps) {
	let tag: UITag;
	cell
		.append(
			<Tag
				style={{
					border: 'none',
					padding: 0,
					margin: 0,
					width: '100%',
					minHeight: 'auto',
					backgroundColor: 'transparent',
				}}
				class={cellTagStyle}
				ref={(t) => (tag = t)}
				readonly={attrs.readonly}
				value={cell.getValue() ?? []}
				onchange={() => {
					cell.setValue(tag.textArr());
				}}
			/>
		)
		.css({ paddingTop: 0, paddingBottom: 0 });
}
